<template>
	<view>
		<view class="header">
			<u-swiper :list="imgs" height="100%" interval='3000' mode='rect' border-radius='0'></u-swiper>
			<view class="location">
				<u-icon name="map" color="#FFFFFF" size="28"></u-icon>
				<view class="locationText">
					<text>{{city}}</text>
				</view>
			</view>
			<u-navbar :border-bottom='false' :background='background' back-icon-color='#333333' back-icon-size='48'>
				<view class="searchBar">
					<u-icon class="icon" name="search" color="#666666" size="32"></u-icon>
					<input type="text" v-model="keyword" placeholder="海南三亚惊喜五日游"
						placeholder-style="color:#666666;font-size:28rpx" />
					<view class="text" @click="navTo('./travelfilt/travelfilt?keyword='+keyword)">
						搜索
					</view>
				</view>
			</u-navbar>
		</view>
		<view class="container">
			<view class="tabsBox">
				<view class="tab-item" @click="navTo('./travelfilt/travelfilt?type=1')">
					<image src="../../../static/imgs/tiyany.png" mode=""></image>
					<text>体验游</text>
				</view>
				<view class="tab-item" @click="navTo('./travelfilt/travelfilt?type=2')">
					<image src="../../../static/imgs/pinzhiy.png" mode=""></image>
					<text>品质游</text>
				</view>
				<view class="tab-item" @click="navTo('./travelfilt/travelfilt?type=3')">
					<image src="../../../static/imgs/zuanxiangy.png" mode=""></image>
					<text>尊享游</text>
				</view>
				<view class="tab-item" @click="navTo('./tripAround/tripAround')">
					<image src="../../../static/imgs/zhoubiany.png" mode=""></image>
					<text>周边游</text>
				</view>
				<view class="tab-item" @click="navTo('./tripPlace/tripPlace')">
					<image src="../../../static/imgs/chufadiy.png" mode=""></image>
					<text>出发地游</text>
				</view>
			</view>
			<view class="lable">
				<image src="../../../static/imgs/tjicon.png" mode=""></image>
				<text>推荐</text>
			</view>
			<view class="travel-cont">
				<u-waterfall v-model="recomList" ref="uWaterfall">
					<template v-slot:left="{leftList}">
						<view v-for="(item, index) in leftList" :key="index"
							@click="navTo('./travelDetail/travelDetail?id='+item.id)">
							<view class="shopitem">
								<view class="type" style="background:linear-gradient(90deg,#E699FD,#EA54D8);"
									v-if="item.type == 1">
									体验游
								</view>
								<view class="type" style="background:linear-gradient(90deg,#FCB352,#FF7700);"
									v-if="item.type == 2">
									品质游
								</view>
								<view class="type" style="background:linear-gradient(90deg,#008FFF,#00FED0);"
									v-if="item.type == 3">
									尊享游
								</view>
								<image :src="item.icon" mode=""></image>
								<view class="title">
									{{item.title}}
								</view>
								<view class="price">
									<text style="font-size: 24rpx;">¥</text>{{item.price}}
								</view>
								<!-- <view class="price" v-else>
									<text style="font-size: 24rpx;">¥</text>{{item.vip_price}}
								</view> -->
								<view class="price-box">
									<view class="rel-price">
										¥<text>{{Number(item.price)-Number(item.use_welfare_fund)}}</text>
									</view>
									<!-- <view class="rel-price" v-else>
										¥<text>{{Number(item.vip_price)-Number(item.use_welfare_fund)}}</text>
									</view> -->
									<view class="fl-price">
										+ {{item.use_welfare_fund}} 福利金
									</view>
								</view>
							</view>
						</view>
					</template>
					<template v-slot:right="{rightList}">
						<view v-for="(item, index) in rightList" :key="index"
							@click="navTo('./travelDetail/travelDetail?id='+item.id)">
							<view class="shopitem">
								<view class="type" style="background:linear-gradient(90deg,#E699FD,#EA54D8);"
									v-if="item.type == 1">
									体验游
								</view>
								<view class="type" style="background:linear-gradient(90deg,#FCB352,#FF7700);"
									v-if="item.type == 2">
									品质游
								</view>
								<view class="type" style="background:linear-gradient(90deg,#008FFF,#00FED0);"
									v-if="item.type == 3">
									尊享游
								</view>
								<image :src="item.icon" mode=""></image>
								<view class="title">
									{{item.title}}
								</view>
								<view class="price">
									<text style="font-size: 24rpx;">¥</text>{{item.price}}
								</view>
							<!-- 	<view class="price" v-else>
									<text style="font-size: 24rpx;">¥</text>{{item.vip_price}}
								</view> -->
								<view class="price-box">
									<view class="rel-price">
										¥<text>{{Number(item.price)-Number(item.use_welfare_fund)}}</text>
									</view>
									<!-- <view class="rel-price" v-else>
										¥<text>{{Number(item.vip_price)-Number(item.use_welfare_fund)}}</text>
									</view> -->
									<view class="fl-price">
										+ {{item.use_welfare_fund}}福利金
									</view>
								</view>
							</view>
						</view>
					</template>
				</u-waterfall>
			</view>
		</view>
		<u-back-top :scroll-top="scrollTop"></u-back-top>
	</view>
</template>

<script>
	import myRequest from '@/api/index.js'
	export default {
		data() {
			return {
				scrollTop: 0,
				keyword: '',
				imgs: [],
				recomList: [], // 推荐列表
				background: {
					backgroundColor: 'rgba(242, 242, 247, 0)'
				},
				page: '1', // 页码
				city:''
			}
		},
		onShow() {
			this.keyword = ''
		},
		onLoad() {
			this.getRecomList()
			this.getBanners()
			let that = this
			uni.getLocation({
				type: 'gcj02',
				geocode: true,
				success(res) {
					that.city = res.address.city
				},
			})
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
			if (e.scrollTop > 144) {
				this.background.backgroundColor = 'rgba(242, 242, 247, 1)'
			} else {
				this.background.backgroundColor = 'rgba(242, 242, 247, 0)'
			}
		},
		onReachBottom() {
			let page = Number(this.page) + 1
			this.page = page.toString()
			this.getRecomList()
		},
		methods: {
			// 获取banner
			async getBanners() {
				let res = await myRequest.getBanner({
					position: '2'
				})
				if (res.status) {
					res.data.forEach(item => {
						this.imgs.push(item.pic_url)
					})
				}
			},
			// 推荐列表
			async getRecomList() {
				let {
					page
				} = this
				let res = await myRequest.getTravel({
					page: page,
				})
				if (res.status) {
					// 匹配推荐
					res.data.forEach(item => {
						if (item.is_recommend == 1) {
							this.recomList.push(item)
						}
					})
				}
			},
			// 跳转
			navTo(url) {
				uni.navigateTo({
					url: url
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.u-swiper-wrap {
		width: 100%;
		height: 100%;
	}

	.header {
		width: 100%;
		height: 400rpx;

		.location {
			padding: 5rpx 10rpx;
			position: absolute;
			left: 48rpx;
			top: 350rpx;
			display: flex;
			align-items: center;
			justify-content: space-evenly;
			border-radius: 40rpx;
			background: rgba(0, 0, 0, 0.3);

			.locationText {
				font-size: 20rpx;
				font-family: Segoe UI;
				font-weight: 400;
				color: #FFFFFF;
			}
		}

		.searchBar {
			display: flex;
			align-items: center;

			input {
				width: 618rpx;
				height: 64rpx;
				background: #FFFFFF;
				border-radius: 40rpx;
				text-indent: 64rpx;
				font-size: 28rpx;
			}

			.icon {
				position: absolute;
				left: 108rpx;
				z-index: 88;
			}

			.text {
				width: 88rpx;
				height: 64rpx;
				position: absolute;
				z-index: 88;
				right: 46rpx;
				font-size: 28rpx;
				line-height: 64rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #3587F7;
			}
		}
	}

	.container {
		padding: 0 15rpx;

		.tabsBox {
			width: 100%;
			height: 158rpx;
			margin-top: 28rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.tab-item {
				width: 120rpx;
				height: 158rpx;
				display: flex;
				flex-direction: column;
				align-items: center;

				image {
					width: 120rpx;
					height: 120rpx;
				}
			}
		}

		.lable {
			margin-top: 50rpx;
			padding-left: 12rpx;
			display: flex;
			align-items: center;

			image {
				width: 48rpx;
				height: 48rpx;
			}

			text {
				margin-left: 20rpx;
				font-size: 36rpx;
				font-family: PingFangSC-Medium;
				color: #333333;
			}
		}

		.travel-cont {
			.shopitem {
				background-color: #FFFFFF;
				padding-bottom: 20rpx;
				width: 348rpx;
				height: auto;
				overflow: hidden;
				border-radius: 16rpx;
				margin: 20rpx auto 0;
				position: relative;

				.type {
					width: 108rpx;
					height: 40rpx;
					border-radius: 16rpx 0px 16rpx 0px;
					font-size: 24rpx;
					font-family: PingFangSC-Regular;
					color: #FFFFFF;
					text-align: center;
					line-height: 40rpx;
					position: absolute;
					top: 0;
					left: 0;
					z-index: 10;
				}

				image {
					width: 348rpx;
					height: 348rpx;
				}

				.title {
					padding: 0 10rpx;
					font-size: 30rpx;
					font-family: Segoe UI;
					color: #333333;
					margin-top: 10rpx;
					overflow: hidden;
				}

				.price {
					padding-left: 10rpx;
					font-size: 36rpx;
					font-family: Arial;
					font-weight: 400;
					color: #FF4600;
					margin-top: 10rpx;
					text-decoration: line-through
				}

				.price-box {
					padding-left: 10rpx;
					width: fit-content;
					width: -webkit-fit-content;
					width: -moz-fit-content;
					display: flex;
					margin-top: 12rpx;

					.rel-price {
						height: 44rpx;
						width: fit-content;
						width: -webkit-fit-content;
						width: -moz-fit-content;
						background: linear-gradient(180deg, #FBE9B9 0%, #FDE6B8 100%);
						border-radius: 8rpx 0px 0px 8rpx;
						padding: 0 6rpx;
						font-size: 24rpx;
						font-family: Arial;
						font-weight: 400;
						line-height: 44rpx;
						color: #333333;

						text {
							font-size: 32rpx;
							font-weight: bold;
							margin-left: 4rpx;
						}
					}

					.fl-price {
						height: 44rpx;
						width: fit-content;
						width: -webkit-fit-content;
						width: -moz-fit-content;
						background: #333333;
						border-radius: 0px 8rpx 8rpx 0px;
						font-size: 24rpx;
						font-family: Arial;
						font-weight: 400;
						color: #FBE8B8;
						line-height: 44rpx;
						padding: 0 6rpx;
					}
				}
			}
		}
	}
</style>
